<template>
  <div class="sub-con" :class="{ 'sub-con-pc': equ === 'pc' }">
    <img v-if="equ !== 'pc'" :src="data.logo" class="logo" />
    <h2>{{ data.name }}</h2>
    <p class="dec">{{ data.description }}</p>
    <img :src="data.qrcode" class="qrcode" />
    <div v-if="data.type !== 'share'" class="finger justify-center">
      <img v-if="equ === 'pc'" src="@images/sweep.png" />
      <img v-else src="@images/finger.png" />
      <p class="ml-8px">
        <span>{{ equ === 'pc' ? '微信扫一扫' : '长按识别二维码' }}关注我</span>
        <span>了解更多关于魔珐和行业资讯</span>
      </p>
    </div>
    <div v-else class="finger justify-center">
      <img src="@images/sweep.png" />
      <p class="ml-20px">
        <span>扫码进入移动端</span>
        <span>进行分享</span>
      </p>
    </div>
  </div>
</template>

<script
  lang="ts"
  setup
  name="SubContent"
>
import { equ } from '../../../../package-env'

defineProps(['data'])

</script>

<style
  scoped
  lang="scss"
>
.sub-con {
  @apply flex flex-col items-center;
  color: rgba(40, 40, 40, 1);

  .logo {
    width: 48px;
    height: 48px;
    padding: 2.5px;
  }

  h2 {
    font-size: 16px;
    font-weight: bold;
    margin: 7.5px 0;
    line-height: 22px;
  }

  .dec {
    font-size: 12px;
    padding: 2px 0;
  }

  .qrcode {
    width: 170px;
    height: 170px;
    margin: 10px 0 23px;
  }

  .finger {
    @apply flex items-center;
    width: 210px;

    img {
      width: 25px;
      height: 25px;
    }

    p {
      font-size: 12px;
      text-align: center;

      span {
        display: block;
      }
    }
  }

  .close-btn {
    @apply absolute flc;
    width: 34.5px;
    height: 34.5px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    bottom: -50px;
    font-size: 16.5px;
  }

  &-pc {
    color: #0B1633;
    font-size: 14px;

    .logo {
      height: 53px;
      width: 53px;
    }

    h2 {
      margin-top: 10px;
      line-height: 28px;
      font-size: 20px;
      /* color: #ffffff; */
    }

    .qrcode {
      height: 214px;
      width: 214px;
      margin: 10px 0 20px;
    }

    .dec {
      font-size: 14px;
      /* margin-top: 9px; */
      /* margin: 10px 0; */
      /* color: #ffffff; */
    }
  }
}
</style>
